<%@ page language="java" contentType="text/html; charset=UTF-8"  
import="java.util.*,java.text.SimpleDateFormat,
com.brother.model.*,com.ibatis.common.util.PaginatedList
,com.brother.util.DateFormatter,com.brother.model.AlarmType,com.brother.util.CountryLocation"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ include file="international.jsp" %> 
<% 
com.brother.model.Customer user = (com.brother.model.Customer)session.getAttribute(com.brother.Constants.LOGIN_SESSTION_NAME);
if(user == null || user.getUserid() == 0)
	return;

session.removeAttribute("count");
session.removeAttribute("countAlarm");

String dateFormat = (String)session.getAttribute(Constants.DATE_FORMAT_SESSION_NAME);

String extDateFormat = (String)session.getAttribute(Constants.EXT_DATE_FORMAT_SESSION_NAME);

SimpleDateFormat format = new SimpleDateFormat(dateFormat);
Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.DAY_OF_MONTH, calendar.get(Calendar.DAY_OF_MONTH) - 7);


DateFormatter localFormat = new DateFormatter(); 
localFormat.setConfig((Float.parseFloat(user.getTimeZoneOffSet()) - 8)+"", dateFormat+" HH:mm:ss");

float default_lat = locale.equals("pt") ? -29.648785f : 22.641918333f;
float default_lng = locale.equals("pt") ? -51.00047f : 114.024560000f;

String country = CountryLocation.getCountryByIP(request.getRemoteAddr());
System.out.println("get country by ip "+request.getRemoteAddr());
if(country.length() < 1)
 	country = request.getLocale().getCountry().toUpperCase();
System.out.println("remote country is "+country);
String serverName = request.getServerName();
//country = "china";
int g_default_level = 2;
int focusLevel = 12;
if(locale.equals("pt")){
	country = "brazil";
}
if(com.brother.util.CommonProperties.getHostByCountry("nigeria").indexOf(serverName.toLowerCase()) > -1){
	country = "nigeria";
	g_default_level = 2;
}else if(country.equals("MY") || country.equals("malaysia")){
	country = "malaysia";
	g_default_level = 2;
}else if(country.equals("china")){
	country = "china";
	g_default_level = 2;
}else if(country.equals("kenya") || country.equals("tanzania") ||
		country.equals("uganda")){
	if(country.equals("uganda")) // Uganda的地图和kenya一起的
		country = "kenya";
	g_default_level = 2;
	country = "other";
}

%>	

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title><fmt:message key="company.name"/></title>
    <meta name="description" content="<fmt:message key="description.keyword"/>" />
    <link rel="stylesheet" type="text/css" href="./css/ext-all.css"/>
	<link rel="stylesheet" type="text/css" media="all" href="style.css" />
	<link rel="stylesheet" type="text/css" href="css/grid-examples.css" />
	<link rel="stylesheet" type="text/css" href="openLayers/theme/default/style.css"/>
<style type=text/css>

.openLayerButtonCss{
	background-color: white;
}

        /* style rows on mouseover */
        .x-grid3-row-over .x-grid3-cell-inner {
            font-weight: bold;
        }
        .x-grid3-scroller{
        	overflow:auto;
			position:relative;
			height:100%;
			
        }
        .x-grid3-cell-inner{
         	text-align:left;
        }
        .x-grid3-hd-inner{
        	text-align:left;
        }
        .x-grid3{
        	height:100%;
        }
        .x-grid3-viewport{
        	height:100%;
        }
        
        .x-window-header{
        	text-align: left;
        }
        .onlinepanelBGColor {
        background-color:Transparent;
         }
        
    </style>
	
    <script type="text/javascript" src="./js/ext-base.js"></script>
    <script type="text/javascript" src="./js/ext-all.js"></script>

    <style type="text/css">
        
        .empty .x-panel-body {
        	border:0px;
        }
		.x-panel-header{
			text-align:left;
		}
		.x-panel-header-text{
			text-align:center;
		}
		
		.x-panel-collapsed .x-accordion-hd .x-tool-toggle{
			z-index: 100;
		}
        
        .fullstyle{
        	width:100%;
        	heihgt:100%;
        }
        
.gis-info-data-row{
  border:0px;
}

.grid-outline{
	border:1px solid;
	 border-color:#99BBE8; 
}
.gps-window-body{
 background-color: none;
 background-image: url("../images/default/window/top-bottom.png") !important;
}

    </style>
    <script type="text/javascript" src="./js/onlinestats.js?v=1"></script>
    <script type="text/javascript" src="./js/layout.js?v=4"></script>
    <script charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=false&language=<%=session.getAttribute("locale").toString().equals("zh")?"zh_CN":session.getAttribute("locale").toString()%>" type="text/javascript"></script>
    <script type="text/javascript" src="js/google_map.js?v=2"></script> 
    <script type="text/javascript" src="js/gps.js?v=2"></script>
    <script type="text/javascript" src="js/location.js?v=1"></script>
    <script type="text/javascript" src="js/extexample.js"></script>
    <script type="text/javascript" src="js/realtime.js?v=20"></script>
    <script type="text/javascript" src="js/extgrid.js?v=6"></script>
	<script type="text/javascript" src="js/search.js"></script>
	<script type="text/javascript" src="js/alarmprompt.js"></script>
	<script type="text/javascript" src="common.js"></script>
	<script type="text/javascript" src="js/distanceDetect.js"></script>
	<script type="text/javascript" src="js/history.js?v=5"></script>
	<script type="text/javascript" src="js/report.js?v=2"></script>
	<script type="text/javascript" src="js/interesting.js?v=1"></script>
	<script type="text/javascript" src="js/manage.js"></script>
	<script src="openLayers/OpenLayers.js" type="text/javascript"></script>
    <script src="openLayers/extention.js" type="text/javascript"></script>
    <script src="lib/OpenLayers/Marker/Label.js" type="text/javascript"></script>
    <script src="lib/OpenLayers/Control/CustomButton.js" type="text/javascript"></script>
    <script src="js/geoPolygon.js" type="text/javascript"></script>
    <script src="js/geoLineLayer.js" type="text/javascript"></script>
    <script src="js/DragListner.js" type="text/javascript"></script>
    <%if(locale.equals("pt")){ %>
    <script type="text/javascript" src="js/locale/ext-lang-pt.js"></script>
    <%}else{ %>
    <script type="text/javascript" src="js/locale/ext-lang-en.js"></script>	
    <%} %>
    
   <script>
var showLabel = '<fmt:message key="top.map.show.label"/>'; 
var focusLevel =<%=focusLevel%>;
var locationTitle = '<fmt:message key="top.map"/>';
var realTimeTitle = '<fmt:message key="top.realtime"/>';
var historyTitle = '<fmt:message key="top.history"/>';
var reportTitle = '<fmt:message key="top.report"/>';
var mamaneTitle = '<fmt:message key="top.manage"/>';
var chartTitle = '<fmt:message key="top.chart.title"/>';
var settingTitle = '<fmt:message key="tracker.parameters.set"/>';
var geoTitle = '<fmt:message key="realtime.geo.fence"/>';
var interestText = '<fmt:message key="interest.text"/>';
var interestPoint = '<fmt:message key="interest.point"/>';
var interestDelete = '<fmt:message key="interest.delete"/>';
var interestOk = '<fmt:message key="interest.ok"/>';
var measureTitle = '<fmt:message key="map.measure"/>';
var time_format_error = '<fmt:message key="time.format.error"/>';
var product_title = '<fmt:message key="manage.title.product"/>';
var isAdmin=<%=user.isAdmin()%>;   
var time_zone = <%=user == null ? "0":user.getTimeZoneOffSet()%>;
var g_default_time_zone_hours = parseInt(time_zone);
var g_default_time_zone_minutes = (parseFloat(time_zone) - parseInt(time_zone)) * 60;
var gpstracker_map = new Array();
var trackerUserid = '<%=user.getUserid()%>';
var userid = "<%=user.getUserid()%>";
var promtTitle = "<fmt:message key="report.alarm"/>";
var trackerInfo = '<fmt:message key="tracker.info"/>';
var userInfo = '<fmt:message key="user.info"/>';


var gis_info_name_title = '<fmt:message key="tracker.name"/>';
var gis_info_date_title = '<fmt:message key="realtime.date"/>';
var gis_info_time_title = '<fmt:message key="realtime.time"/>';
var gis_info_lat_title = '<fmt:message key="realtime.lat"/>';
var gis_info_lng_title = '<fmt:message key="realtime.lng"/>';
var gis_info_speed_title = '<fmt:message key="report.speed"/>';
var gis_info_address_title = '<fmt:message key="location.address"/>';
var gis_info_status_title ='<fmt:message key="report.state"/>';
var gis_info_alarm_title ='<fmt:message key="report.alarm"/>';
var gis_info_mileage_title = '<fmt:message key="report.distance"/>';
var gis_info_acc_status = '<fmt:message key="realtime.acc.status"/>';
var gis_info_door_status = '<fmt:message key="realtime.door.status"/>';

var acc_on = "<fmt:message key="alarm.acc.on"/>";
var door_opened = "<fmt:message key="alarm.door.opened"/>";
var acc_off = "<fmt:message key="alarm.acc.off"/>";
var door_closed = "<fmt:message key="alarm.door.closed"/>";


trackerHeader = '<fmt:message key="grid.trackerHeader"/><img title="<fmt:message key="grid.refreshText"/>" src="images/default/grid/refresh.gif" style="cursor:pointer;" onclick="document.getElementById(\'trackersAutocomplete\').blur();reloadTrackerGrid();"/>';
var locale = '<%=(String)session.getAttribute("locale")%>';
var g_str_no_data = "<fmt:message key="realtime.no.data"/>";
var g_str_comment = "<fmt:message key="realtime.comment"/>";
var g_str_select_tracker = "<fmt:message key="realtime.select.tracker.to.control"/>";
var g_uin_str = "";

var g_str_loading_data = "<fmt:message key="history.loading.data"/>";
var g_str_select_tracker_search = "<fmt:message key="history.select.tracker.search"/>";
var g_str_select_device_save = "<fmt:message key="history.select.tracker.save"/>";
var g_str_history_load_complete = "<fmt:message key="history.load.complete"/>";
var g_str_points = "<fmt:message key="history.points"/>";
var g_str_parsing_map = "<fmt:message key="history.parsing"/>";
var g_str_history_empty = "<fmt:message key="history.empty"/>";
var g_str_tracking_animation = "<fmt:message key="history.tracking.animation"/>";
var history_time_input = '<fmt:message key="history.time.input"/>';
var email_setting_title = '<fmt:message key="manage.email.setting"/>';
var change_password_title = '<fmt:message key="manage.modify.password"/>';
var reportLimit = '<fmt:message key="search.limit"/>';

var search_select_user='<fmt:message key="search.select.user"/>';
var search_select_tracker='<fmt:message key="search.select.tracker"/>';

var beforePageText = '<fmt:message key="beforePageText"/>';
var refreshText = '<fmt:message key="grid.refreshText"/>';
var afterPageText = '<fmt:message key="afterPageText"/>';

var finishGEOEdit = '<fmt:message key="control.geofence.edit.finish"/>';
var backToGEO = '<fmt:message key="control.geofence.edit.back"/>';

movingText = '<fmt:message key="movingText"/>';
clearMeasureTitle = '<fmt:message key="clearMeasureTitle"/>';

var gridHeight  = 260;

var g_str_comment = "";
var g_str_id = "ID:";
var g_str_lat = gis_info_lat_title;//"Lat:";
var g_str_lng = gis_info_lng_title;//"Lng:";
var g_str_signal = "Signal:";
var g_str_speed = gis_info_speed_title;//"Speed:";
var g_str_state = gis_info_status_title;//"State:";

Ext.BLANK_IMAGE_URL = 'images/default/s.gif';



</script>
<script type="text/javascript">
//  29.648785S,51.00047W
var g_default_lat = <%=default_lat%>;
var g_default_lng = <%=default_lng%>;
var g_default_level = <%=g_default_level%>;//14;
var g_default_type = '';//G_NORMAL_MAP;
var LG_Format_Error = '<fmt:message key="location.wrong.data.format"/>';

var geo_default_lat = 1.54874;
var geo_default_lng = 110.34332;
var geomapCountry = '<%=country%>';

function get_gps_cmd_str(cmd)
{
	if (cmd == 0)
	{
		return "<fmt:message key="alarm.gps.pos"/>";
	}
	else if (cmd == "1")
	{
		return "<fmt:message key="alarm.input1"/>";
	}
	else if (cmd == "2")
	{
		return "<fmt:message key="alarm.input2"/>";
	}
	else if (cmd == "3")
	{
		return "<fmt:message key="alarm.input3"/>";
	}
	else if (cmd == "4")
	{
		return "<fmt:message key="alarm.gps.over.speed"/>";
	}
	else if (cmd == "5")
	{
		return "<fmt:message key="alarm.gps.geo.fence"/>";
	}
	else if (cmd == "6")
	{
		return "<fmt:message key="alarm.power.lost"/>";
	}
	else if (cmd == "7")
	{
		return "<fmt:message key="alarm.low.power"/>";
	}else if (cmd == "8")
	{
		return "<fmt:message key="alarm.input4"/>";
	}else if (cmd == "9")
	{
		return "<fmt:message key="alarm.input5"/>";
	}else if (cmd == "11")
	{
		return "<fmt:message key="alarm.acc.on"/>";
	}else if (cmd == "12")
	{
		return "<fmt:message key="alarm.siren"/>";
	}else if (cmd == "13")
	{
		return "<fmt:message key="alarm.door.opened"/>";
	}else if (cmd == "14")
	{
		return "<fmt:message key="alarm.sos"/>";
	}
	
	return "<fmt:message key="alarm.unknown"/>";
}


Ext.onReady(function(){

	Ext.MessageBox.buttonText.yes = '<fmt:message key="button.yes.text"/>';
	Ext.MessageBox.buttonText.no = '<fmt:message key="button.no.text"/>';
	Ext.MessageBox.buttonText.cancel = '<fmt:message key="button.cancel.text"/>';
	var g_geocoder = new GPS_Geocoder();
    new Ext.form.DateField({
                        fieldLabel: '',
                        width:80,
                        allowBlank:false,
                        format:'<%=extDateFormat%>',
                        applyTo: 'from'});
 
     new Ext.form.DateField({
                        fieldLabel: '',
                        allowBlank:false,
                        width:80,
                        format:'<%=extDateFormat%>',
                        applyTo: 'to'});   

     new Ext.form.DateField({
         fieldLabel: '',
         width:80,
         allowBlank:false,
         format:'<%=extDateFormat%>',
         applyTo: 'from2'});

new Ext.form.DateField({
         fieldLabel: '',
         allowBlank:false,
         width:80,
         format:'<%=extDateFormat%>',
         applyTo: 'to2'}); 
    
    	var t = new Ext.form.TimeField({
            fieldLabel: '',
            increment:60,
            width:40,
            allowBlank:false,
            value:'00:00',
            format:'H:i',
            applyTo: 'startTime'});
        
     	var t2 = new Ext.form.TimeField({
            fieldLabel: '',
            increment:60,
            width:40,
            allowBlank:false,
            value:'23:59',
            format:'H:i',
            applyTo: 'endTime'});   

     	t = new Ext.form.TimeField({
            fieldLabel: '',
            increment:60,
            width:40,
            allowBlank:false,
            value:'00:00',
            format:'H:i',
            id:'startTime2',
            applyTo: 'startTime2'});    

     	t2 = new Ext.form.TimeField({
            fieldLabel: '',
            increment:60,
            width:40,
            allowBlank:false,
            value:'23:59',
            format:'H:i',
            id:'endTime2',
            applyTo: 'endTime2'}); 
        
    });

</script>
    
</head>
<body>
<div id="content" style="height:100%;width:100%;margin:0px 0px 0px 0px;">
<div id="MapPanel" style="height:100%;width:100%;margin:0px 0px 0px 0px;">
</div>
<iframe id="framePanel" frameborder="1" width="100%" height="100%" src="blank.html" style="display:none;"></iframe>
</div>

<div id="realtimePanel" style="display:none;padding-left:2px;margin-top:2px;">
<table  cellspacing="0" style=" margin-left:4px;margin-bottom:2px;"  cellpadding="2" width="100%">
<tr>
<td class="tableLeftTitle" align="left" nowrap="nowrap" ><fmt:message key="search.user.name"/>:</td>
<td align="left"><input type="text" id="userAutocomplete" size="21" /></td>
</tr>
<tr>
<td class="tableLeftTitle" nowrap="nowrap" align="left"><fmt:message key="search.tracker"/>:</td>
<td align="left" nowrap="nowrap"><table width="100%" cellpadding="0" cellspacing="0" border=0><tr><td width="150"><input type="text" id="trackersAutocomplete" size="21" /></td><td align="left"><img src="images/search.jpg" style="cursor:pointer" onclick="reloadTrackerGrid();"/></td></tr></table></td>
</tr>
</table>
<div id="grid-trackers" style="height:334px"></div>
</div>

<div id="gisInfo" style="height:60px;width:100%;margin:0px 0px 0px 0px;display:none"></div>

<table border="0" cellspacing="0" id="locationControl" class="tableNoBorder" style="display:none; margin-left:5px;margin-top:5px" cellpadding="3" height="100%" width="100%">
			  
			  <tr>
				<td colspan="2" align="left"><fmt:message key="location.pleaseEnter"/>:</td>
			  </tr>
			  <tr>
				<td width="60" align="right" nowrap="nowrap"><div  style="font-weight:bold;"><fmt:message key="location.lat"/>:</div></td>
				<td align="left">
				  <input type="text" name="lat_value" id="lat_value" value="<%=default_lat%>" size="20" />
				</td>
			  </tr>
			  <tr>
				<td align="right"><b><fmt:message key="location.lng"/>:</b></td>
				<td align="left">
				  <input type="text" name="lon_value" id="lon_value" value="<%=default_lng%>" size="20"/>
				</td>
			  </tr>
			  <tr><td colspan="2">&nbsp;</td></tr>
			  <tr>
				<td>&nbsp;</td>
				<td align="left"><div id="locateButton"></div><script>
				Ext.onReady(function(){
					var button = new Ext.Button({renderTo:'locateButton',type:'button', 
						text:'<fmt:message key="location.locate"/>',split: true,width:120,
						enableToggle:false});
					button.on('click',function(){
						setMapPosition(document.getElementById('lat_value').value, document.getElementById('lon_value').value);
						});
						});
				</script></td>
			  </tr>
			  
			  <tr>
			    <td  colspan="2" valign="top" align="left">&nbsp;</td>
		      </tr>
			 	
			  <tr>
			  	<td align="left" valign="top" height="100%"><fmt:message key="location.address"/>:</td>
			  	<td align="left" valign="top">
					<div id="location_info_address"></div>				</td>
			  </tr>			  
			</table>

<div id="signalInfo"><img src="arrow/nosignal.gif"  id="signalImg"/>&nbsp;<span style="display:"  id="offlineText"><fmt:message key="report.no.signal"/></span><span style="display:none"  id="onlineText"><fmt:message key="realtime.online"/></span></div>

<div id="alarmInfo"><img src="arrow/noalarm.gif"  id="alarmImg"/>&nbsp;<span style="display:none"  id="alarmText"><fmt:message key="report.alarm"/></span><span style="display:"  id="noalarmText"><fmt:message key="report.alarm.no"/></span></div>

<div id="signalInfo2"><img src="arrow/nosignal.gif"  id="signalImg"/>&nbsp;<span style="display:"  id="offlineText"><fmt:message key="report.no.signal"/></span><span style="display:none"  id="onlineText"><fmt:message key="realtime.online"/></span></div>

<div id="alarmInfo2"><img src="arrow/noalarm.gif"  id="alarmImg"/>&nbsp;<span style="display:none"  id="alarmText"><fmt:message key="report.alarm"/></span><span style="display:"  id="noalarmText"><fmt:message key="report.alarm.no"/></span></div>

    <div id="prompt" class="BottomPromt"  style="display:none;">
	<div class="content">
    </div>
    </div>
    
    <div id="bottomGpsInfo2" class="BottomPromt"  style="display:none;">
	<table width="100%" cellpadding="0" cellspacing="0" border="1">
        <tr>
            <td style="wdith: 50%;" align="left">
                Located by:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_Located">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                GPS module:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_GPS">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                GSM CSQ:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_GSM">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                Battery:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_Battery">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                Fuel level:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_Fuel">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                Analog input:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_AD2">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                Power voltage:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_Power">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                Direction:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_Direction">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                SOS alarm:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_SOS">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                Over speed:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_Overspeed">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                Input alarm:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_Input">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                Engine:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_Engine">none</span>
            </td>
        </tr>
        <tr>
            <td style="wdith: 50%;" align="left">
                Output:&nbsp;
            </td>
            <td style="wdith: 50%;" align="left">
                &nbsp;<span id="onlineTracker_Output">none</span>
            </td>
        </tr>
    </table>	
    </div>
    
    <div id="gisInfo2" style="height:60px;width:100%;margin:0px 0px 0px 0px;"></div>
    
    <div id="historyPanel" style="display:none">
    <table width="100%" height="100%" border="0" >
	<tr>
		<td width="240px" valign="top">
			<table width="100%" cellspacing="0" border="0" cellpadding="0">

				<tr>

					<td align="left" valign="middle">
					<form name="form1" action="gps_history.jsp" method="get" onSubmit="return false;">
						<table>
							<tr>
								<td colspan="2" align="left">
									<table class="tableNoBorder" width="100%">
										<tr>
											<td nowrap="nowrap" width="50"><fmt:message key="report.from.date.time"/>:</td>

											<td nowrap="nowrap" width="100">
											<input name="createTimeFrom" id="from" type="text" value="<%=format.format(calendar.getTime()) %>" size="10" readonly="readonly" maxlength="50"  />
											</td><td>
											
											<input type="text" name="startTime" id="startTime" size="6" style="width:40px"/>
											</td>
										</tr>

										<tr>									
											<td><fmt:message key="report.to.date.time"/>:</td>
											<td nowrap="nowrap"><input name="createTimeTo" id="to" type="text" value="<%=format.format(new Date())%>" size="10" readonly="readonly" maxlength="50" />
											</td><td>
											<input type="text" name="endTime" value="23:59" id="endTime" size="6" style="width:40px"/>
											</td>

										</tr>

									</table>
								</td>
							</tr>
										<tr>
										<td colspan="2" nowrap="nowrap">
										    <div id="searchSubmitBtn" style="width:50px;float:left"></div>
										    <div id="playStopBtn"  style="width:70px;float:left;margin-left:3px;"></div>
										    <div id="saveKmlBtn"  style="width:100px;float:left;margin-left:3px;"></div>
										    &nbsp;&nbsp;
										    
										    <script>
				Ext.onReady(function(){
					var searchSubmitBtn = new Ext.Button({renderTo:'searchSubmitBtn',type:'submit', 
						width:50,
						text:'<fmt:message key="report.search"/>',
						enableToggle:false});
					searchSubmitBtn.on('click',function(){
						goto_page(1);
					});
					
					var playStopBtn = new Ext.Button({renderTo:'playStopBtn',type:'button', 
						width:70,
						text:'<fmt:message key="history.play.stop"/>',
						enableToggle:false});
					playStopBtn.on('click',function(){
						if(!isPlaying){  isPlaying = true;begin_ani_GPS();}else{isPlaying = false;}
						});

					var saveKmlBtn = new Ext.Button({renderTo:'saveKmlBtn',type:'button', 
						width:100,
						text:'<fmt:message key="history.save.kml.file"/>',
						enableToggle:false});
					saveKmlBtn.on('click',function(){
						downloadToFile();
						});

					var button = new Ext.Button({renderTo:'decreaseBtn',type:'button', 
						width:15,
						text:'-',
						enableToggle:false});
					button.on('click',function(){
						inc_ani_speed();
						});

					button = new Ext.Button({renderTo:'incBtn',type:'button', 
						width:15,
						text:'+',
						enableToggle:false});
					button.on('click',function(){
						dec_ani_speed();
						});
					
						});
				</script>
										  </td>
									  </tr>
						</table>
					  </form>
					</td>
				</tr>
				
				<tr><td align="left" style="padding-left:3px">
				<table cellpadding="0"  cellspacing="0" border="0"  width="100%">
				<tr><td align="left" width="124"><fmt:message key="report.distance"/>: <div style="display:inline; font-weight:bold; font-size:12px;" id="length" name="length">0</div>KM</td>
				
				<td align="left" nowrap="nowrap">
				<table cellpadding="0" cellspacing="0" border=0><tr><td><span id="decreaseBtn"></span></td><td><fmt:message key="report.play.speed"/>:<span id="ani_speed" style="display:inline"></span></td><td><span id="incBtn"></span></td></tr></table>
				</td></tr></table></td></tr>

				<tr>
					<td align="left" style="padding-left:3px">
					<b><fmt:message key="history.search.result"/>:</b> &nbsp;&nbsp;<div style="font-weight:bold;display:inline;cursor:hand;color:#2A1FFF;cursor:pointer" onClick="javascript:g_page--;if (g_page<0)g_page=0; goto_page(g_page);"><fmt:message key="report.previous"/></div>&nbsp;<span id="cur_page"></span>/<span id="total_page"></span>&nbsp;<div style="font-weight:bold;display:inline;cursor:hand;color:#2A1FFF;cursor:pointer" onClick="javascript:g_page++; if (g_page > g_total_pages){g_page = g_total_pages;}goto_page(g_page);"><fmt:message key="report.next"/></div>
					<hr id="tipTop" size=1 color="#a9bad3"/>
					</td>
				</tr>

				<tr>
					<td height="100%">
						<iframe id="search_result" src="blank.html?update=<%=Math.random() %>" name="search_result" width="100%" style=" margin-bottom:3px;overflow-x:hidden" frameborder="0"></iframe>
					</td>
				</tr>
				

			</table>

		</td>

	</tr>
</table>
    </div>
    
    
		<table id="reportPanel" style="padding-left:5px; " class="tableNoBorder" width="100%" cellpadding="5" cellspacing="0">
							<tr>

								<td align="left" width="50"><fmt:message key="report.from.date.time"/>:</td>
								<td align="left" width="100"><input name="fromDate" id="from2" type="text" value="<%=format.format(calendar.getTime()) %>" size="10" readonly="readonly" maxlength="50" />
								</td>
								<td><input type="text" name="startTime" id="startTime2" size="6" style="width:40px"/></td>
								</tr>
								<tr>
								<td align="left"><%
								calendar.set(Calendar.DAY_OF_MONTH,calendar.get(Calendar.DAY_OF_MONTH)+7);
								%><fmt:message key="report.to.date.time"/>:</td>
								<td align="left"><input name="toDate" type="text" id="to2" value="<%=format.format(calendar.getTime()) %>" size="10" readonly="readonly" maxlength="50"  />
								</td>
								<td><input type="text" name="endTime" id="endTime2" size="6" style="width:40px"/></td>
								</tr>
								
								<tr>
								<td align="left"><fmt:message key="report.filter"/>:</td>

								<td align="left" colspan="2">
							<select name="dataState" id="dataState">
						                <option value=""  selected="selected" ><fmt:message key="report.all.data"/></option>
						                <option value='1' ><fmt:message key="report.all.alarm"/></option>
						                <option  value='<%=AlarmType.ACC_ON%>' ><fmt:message key="alarm.acc.report.on"/></option>
						                <option  value='<%=AlarmType.ACC_OFF%>' ><fmt:message key="alarm.acc.report.off"/></option>
						                <option  value='<%=AlarmType.Input_1%>' ><fmt:message key="alarm.input1"/></option>
						                <option  value='<%=AlarmType.Input_2%>' ><fmt:message key="alarm.input2"/></option>
						                <option  value='<%=AlarmType.Input_3%>' ><fmt:message key="alarm.input3"/></option>
						                <option  value='<%=AlarmType.Input_4%>' ><fmt:message key="alarm.input4"/></option>
						                <option  value='<%=AlarmType.Input_5%>' ><fmt:message key="alarm.input5"/></option>
						                <option  value='<%=AlarmType.Over_Speed_Alarm%>' ><fmt:message key="alarm.gps.over.speed"/></option>
						                <option  value='<%=AlarmType.DOOR_OPENED%>' ><fmt:message key="alarm.door.report.opened"/></option>
						                <option  value='<%=AlarmType.DOOR_CLOSED%>' ><fmt:message key="alarm.door.report.closed"/></option>
						                <option  value='<%=AlarmType.Geo_Fence_Alarm%>' ><fmt:message key="alarm.gps.geo.fence"/></option>
						                <option  value='<%=AlarmType.External_Power_Lost%>' ><fmt:message key="alarm.power.lost"/></option>
						                <option  value='<%=AlarmType.SIREN%>' ><fmt:message key="alarm.siren"/></option>
						                <option  value='<%=AlarmType.SOS_Alarm%>' ><fmt:message key="alarm.sos"/></option>
							</select>

								</td>
								</tr>
								<tr>
								<td align="left">
									<fmt:message key="report.pages"/>:
								</td>
								
								<td align="left"  colspan="2"><input type="text" name="pageSize" id="pageSize" size="2" value="50"  /></td>
								</tr>
								<tr>
								<td align="left">
									&nbsp;
								</td>
								<td align="left"  colspan="2">
								<div id="reportSearchBtn"></div>
								<input type="hidden" name="action" value="search"/>
								<script>
				Ext.onReady(function(){
					 button = new Ext.Button({renderTo:'reportSearchBtn',type:'button', 
						text:'<fmt:message key="report.search"/>',split: false,width:80,
						enableToggle:false});
					button.on('click',function(){
						showReport();
						});
						});
				</script>
								</td>
							</tr>
					  </table>
    
<bgsound id=wav_alert src="" loop="2"/>


<div id="manageMenu" style="border-color:#C0C0C4; padding:2px; width:100%;display:none">
<table class="gpsManageTable" width="100%">
<%if(user.isAdmin()){ %>
	<tr>

		<td align="center"  ><a href="#no" onclick="showProducts(this);"><fmt:message key="manage.tracker.config"/></a></td>
	</tr>
		<tr>
		<td align="center"  ><a href="#no" onclick="showUsers(this)"><fmt:message key="manage.users"/></a></td>

	</tr>

	<tr>
		<td align="center"  ><a href="#no" onclick="setEmail(this);"><fmt:message key="manage.email.setting"/></a></td>

	</tr>
	<%} %>
	<tr>
		<td align="center"  ><a href="#no" onclick="setPassword(this);"><fmt:message key="manage.modify.password"/></a></td>
	</tr>
	<%if(user.isAdmin()){ %>
	<tr>
		<td align="center"  ><a href="#no" onclick="showUpgade(this);"><fmt:message key="manage.firmware.upgrade"/></a></td>
	</tr>
	<%} %>
</table>
</div>

<div id="detailWindow" style="z-index:200"></div>
<div id="userDetailWindow" style="z-index:200"></div>

<style type="text/css">
        .x-panel-body-noborder
        {
        	background-color:Transparent;
        }
    </style>


<div id="loginInfo">

<div style="float:right;font-weight:bold;color:white;width:420px;" id="logininfo_online">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>

<%
							com.brother.model.Customer loginUser = (com.brother.model.Customer)session.getAttribute(com.brother.Constants.LOGIN_SESSTION_NAME);
							if(loginUser != null){
							%>
							<fmt:message key="top.welcome"/>, <%=loginUser.getName()%>&nbsp;&nbsp;<a style="color:red;" href="login.jsp?action=logout"><fmt:message key="user.logout"></fmt:message></a>&nbsp;&nbsp;&nbsp;<fmt:message key="user.timeZone"></fmt:message>:<%=loginUser.getTimeZoneOffSet()%>
							<%}else{ %><a href="login.jsp"><fmt:message key="user.login"></fmt:message></a><%} %>&nbsp;&nbsp;							
							
															&nbsp;<a href="#" style="display:none" onclick="SetCookie('language', 'en', 24*60*60*1000*30);location.reload();">English</a>&nbsp;
															&nbsp;<a href="#" style="display:none"  onclick="SetCookie('language', 'zh', 24*60*60*1000*30);location.reload();">中文</a>&nbsp;

</td>

<td id="td_logininfo_online">

<div id="onlineStatsEl" class="BottomPromt_online"  style="display:none;">
	<table width="100%" cellpadding="0" cellspacing="0"><tr><td style="wdith:50%;font-weight: bold;" align="left"><fmt:message key="realtime.online"/>:&nbsp;<span id="onlineTracker" style="font-weight: bold;"></span></td><td style="wdith:50%;font-weight: bold;" align="left">&nbsp;<fmt:message key="report.no.signal"/>&nbsp;&nbsp;:<span id="offTracker" style="font-weight: bold;"></span></td></tr></table>
    </div>
    
</td>
</tr>
</table>
</div>
</div>
<iframe style="display:none" id="flashTarget" name="flashTarget" src=""></iframe>
<div id="geoeditover" style="background-color:white">If you want to end the GEO editor, then click OK.</div>
<div id="geoerangeview" style="background-color:white">If you want to go back to Geo-fence, then click OK.</div>


<script>
window.onload=function loads()
{
	loginbg();
}
function loginbg()
{
	try
	{
		document.getElementById('onlineStatsEl').parentElement.className='';	
	}catch(ex)
	{
		loginbg();
	}
	
}

				//alert(document.getElementById('td_logininfo_online').nextElement().tagName);
				//alert(document.getElementById('td_logininfo_online').nextElement().nextElement().tagName);
				//alert(document.getElementById('td_logininfo_online').nextElement().nextElement().nextElement().tagName);
				
				</script>
</body>
</html>

<%
com.brother.database.DataBase.closeThreadConnection();
%>
